<template>
  <div class="user_list-page flexC">
      <template>
        <span style="font-size: 16px;font-weight: 500;white-space: nowrap;margin-left: 15px;margin-top: 20px;margin-bottom: 0px;">类型选择</span>
        <Divider style="margin-top: 10px;margin-bottom: 10px;" />
        <Collapse simple>
            <Panel name="1">
                身份证生成
              <p slot="content">
                <i>最小年龄：</i><InputNumber :max="10" :min="1" v-model="identity.minage"></InputNumber>
                <i style="margin-left: 30px;">最大年龄：</i><InputNumber :max="90" :min="1" v-model="identity.maxage" ></InputNumber>
                <i  style="margin-left: 30px;">性别：</i>

                <Select v-model="identity.sex" style="width:78px;">
                    <Option value='M'>男</Option>
                    <Option value='F'>女</Option>
                </Select>
                <i style="margin-left: 30px;">生成个数：</i><InputNumber :max="90" :min="1" v-model="identity.num"></InputNumber>
                <Button type="primary" ghost style="margin-left: 20px;" @click="generate">生成</Button>
              </p>
              <p slot="content" style="margin-top: 20px;">
                <Input v-model="card" type="textarea" style="width: 510px;" :rows="10"/>
              </p>
            </Panel>



            <Panel name="2">
                手机号生成
                <p slot="content">
                <i>生成个数：</i><InputNumber :max="90" :min="1" v-model="phone.num"></InputNumber>
                <Button type="primary" ghost style="margin-left: 20px;" @click="generatephone">生成</Button>
              </p>
                <p slot="content" style="margin-top: 20px;">
                <Input v-model="phonemodel" type="textarea" style="width: 510px;" :rows="10"/>
              </p>
            </Panel>
            <Panel name="3">
                信用卡号生成
                <p slot="content">
                <i>生成个数：</i><InputNumber :max="90" :min="1" v-model="Credit.num"></InputNumber>
                <Button type="primary" ghost style="margin-left: 20px;" @click="generateCredit">生成</Button>
              </p>
                <p slot="content" style="margin-top: 20px;">
                <Input v-model="Creditmodel" type="textarea" style="width: 510px;" :rows="10"/>
              </p>
            </Panel>
        </Collapse>
    </template>
  </div>
</template>

<script>

import {Credit, IdCard, phone} from '../../api/api'

export default {
name: "service",
  data() {
  return {
    identity:{
      minage: 18,
      maxage: 65,
      num: 5,
      sex: 'M'
    },
    phone: {
      num:5
    },
    Credit: {
      num:5
    },
    card:[],
    phonemodel:[],
    Creditmodel:[]
   }
  },
  methods: {
    generate() {
      IdCard(this.identity).then(res => {
        let data = res.data.data
        // console.log(data)
        this.card = data
      })
    },

    generatephone() {
      phone(this.phone).then(res => {
        let data = res.data.data
        // console.log(data)
        this.phonemodel = data
      })
    },

    generateCredit() {
      Credit(this.Credit).then(res =>{
        let data = res.data.data
        // console.log(data)
        this.Creditmodel = data
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ textarea.ivu-input {
          background: #333;
          color: #eee;
          height: var(--height);
        }
</style>
